<template>
  <div class="wrap clearfix">
    <div class="location">当前位置：首页<span>&gt;</span><b class="red">购物车</b></div>

     <!-- 首行 -->


  
 <MyBody :list="list" v-model="checkedPrice" :allPrice="allPrice" :preferential="preferential" @addCount="addCount" @delCount="delCount" :checkList="checkList" @changeList="changeList" @removeList="removeList" :checkAll="checkAll" @changeAll="changeAll" />
    <!-- 价格信息 -->

<!-- <button @click="fn">点击测试</button> -->
  </div>
</template>

<script>

import MyBody from '@/components/MyBody.vue'

export default {
  components:{
  MyBody
  },
  data() {
    return {
      list: [
        {
          name: '凌美Lamy Safari钢笔/签字笔T52黑色墨水<',
          id: 0,
          oldPrice: 158.00,
          price: 129.00,
          count: 0,
          img: 'https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg',
          isSelected: false
        },
        {
          name: '凌美Lamy Safari钢笔/签字笔T52黑色墨水<',
          id: 1,
          oldPrice: 158.00,
          price: 145.00,
          count: 0,
          img:  'https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg',
          isSelected: false
        },
        {
          name: '德国进口 凌美(LAMY)签字笔钢笔墨水水笔专用一次性墨水胆笔芯5支一盒T10德国进口',
          id: 2,
          oldPrice: 158.00,
          price: 130.00,
          count: 0,
          img: 'https://yanxuan-item.nosdn.127.net/cd4b840751ef4f7505c85004f0bebcb5.png',
          isSelected: false
        }
      ]
    }
  },
 methods:{
addCount(id){
 this.list.forEach(item=>item.id===id?item.count+=1:'')
},
delCount(id){
   this.list.forEach(item=>item.id===id?item.count-=1:'')
},
changeList(id){
   this.list.forEach(item=>{
    if(item.id===id){
      item.isSelected=!item.isSelected
      if(item.isSelected){
        item.count=1
      }else{
        item.count=0
      }
    }
    })
},
removeList(id){
 this.list= this.list.filter(item=>item.id!==id)
},
 changeAll(value){
   this.list.forEach(item=>item.isSelected=value)
   if(value){
    this.list.forEach(item=>item.count=1)
   }else{
    this.list.forEach(item=>item.count=0)
   }
 }
 },
  computed:{
    checkAll(){
      return this.list.every(item=>item.isSelected) 
    },
    checkedPrice(){
      const arr=this.list.filter(item=>item.isSelected)
      return arr.reduce((prev,item)=>prev+item.price*item.count,0)
    },
     allPrice(){
      const arr=this.list.filter(item=>item.isSelected)
     return arr.reduce((prev,item)=>prev+item.oldPrice*item.count,0)
     },
     preferential(){
      const arr=this.list.filter(item=>item.isSelected)
      return arr.reduce((prev,item)=>prev+(item.oldPrice-item.price)*item.count,0)
     },
    checkList(){
      return this.list.filter(item=>item.isSelected).length
    }
  }
}
</script>

<style>
/* 公共样式 */
.clearfix {
  content: '';
  display: block;
  clear: both;
}

.red {
  color: #f30213;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

/* 清除默认样式 */
* {
  margin: 0px;
  padding: 0px;
  font-size: 14px;
}

a {
  text-decoration: none;
  color: #333;
}

input {
  outline: none;
}

.wrap {
  width: 1180px;
  margin: 0 auto;
}

.wrap .location {
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

.cartTable {
  border: 1px solid #ccc;

}

.cartTable tr.title {
  background-color: rgb(241, 243, 244);
  font-weight: bold;
}

.cartTable tbody tr td {
  /* border: 1px solid rgb(245, 245, 245); */
  padding: 10px;
}

/* 原价 */
.cartTable tbody tr td .tdl {
  text-decoration: line-through;
  color: #999;
}

/* 商品数量 */
.cartTable tr .amount .unum {
  width: 70px;
  height: 30px;
  box-sizing: border-box;
  text-align: center;
  font-size: 16px;
  float: left;
}

/* 数量加减按钮 */
.cartTable tr .amount a {
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 18px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.cartTable tr .amount a.Increase {
  border-right: none;
  float: left;
}

.cartTable tr .amount a.Reduce {
  border-left: none;
  float: left;
}

.cartTable tr.count .jiesuan .right {
  text-align: right;

}

.cartTable tr.count .jiesuan .right p {
  margin: 5px 0;
}

.cartTable tr.count .jiesuan .right .pay {
  display: block;
  width: 160px;
  height: 50px;
  line-height: 50px;
  background-color: #f30213;
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 20px;
}
</style>
